<%@ page contentType="text/html;charset=UTF-8" language="java" %> 
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>SSMDemo</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
      integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
      crossorigin="anonymous"
    />

    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script
      src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"
      integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
      crossorigin="anonymous"
    ></script>
    <style>
      .container {
        margin-top: 100px;
      }

      table {
        margin-top: 10px;
      }
    </style>
  </head>

  <body>
    <div class="container center-block">
      <div class="row">
        <div class="span2"></div>
        <div class="span6">
          <div class="alert alert-info" role="alert">简单的增删改查操作</div>
          <form class="form-search form-inline" action="/ssmdemo/list">
            <input
              class="input-medium search-query"
              type="text"
              name="name"
              placeholder="请输入需要查询的用户名"
              value="${name}"
            />
            <button type="submit" class="btn">查找</button>
          </form>
          <button type="button" class="btn btn-primary" onclick="add()">
            添加
          </button>
          <table class="table table-bordered table-striped">
            <thead>
              <tr>
                <th>编号</th>
                <th>用户名</th>
                <th>性别</th>
                <th>出生日期</th>
                <th>操作</th>
              </tr>
            </thead>
            <tbody>
              <c:forEach items="${data.list}" var="user" varStatus="status">
                <tr>
                  <td>${status.count}</td>
                  <td>${user.username}</td>
                  <td>${user.sex=='M'?'男':'女'}</td>
                  <td>${user.birth}</td>
                  <td>
                    <button
                      type="button"
                      class="btn btn-info"
                      onclick="edit('${user.id}')"
                    >
                      编辑
                    </button>
                    &nbsp;&nbsp;&nbsp;
                    <button
                      type="button"
                      class="btn btn-danger"
                      onclick="del('${user.id}','${user.username}')"
                    >
                      删除
                    </button>
                  </td>
                </tr>
              </c:forEach>
            </tbody>
          </table>
          <nav aria-label="Page navigation pull-right">
            <ul class="pagination pagination-lg">
              <c:if test="${data.currPage==1}" var="flag">
                <li class="disabled">
                  <a href="#" aria-label="Previous">
                    <span aria-hidden="true">&laquo;</span>
                  </a>
                </li>
              </c:if>
              <c:if test="${not flag}">
                <li>
                  <a
                    href="/ssmdemo/list?$?page=${data.currPage-1}&name=${name}"
                    aria-label="Previous"
                  >
                    <span aria-hidden="true">&laquo;</span>
                  </a>
                </li>
              </c:if>

              <c:forEach var="i" begin="1" end="${data.totalPage}">
                <c:choose>
                  <c:when test="${i==data.currPage}">
                    <li class="active"><a href="#">${i}</a></li>
                  </c:when>
                  <c:otherwise>
                    <li><a href="/ssmdemo/list?page=${i}&name=${name}">${i}</a></li>
                  </c:otherwise>
                </c:choose>
              </c:forEach>

              <c:if test="${data.currPage==data.totalPage}" var="endflag">
                <li class="disabled">
                  <a href="#" aria-label="Next">
                    <span aria-hidden="true">&raquo;</span>
                  </a>
                </li>
              </c:if>

              <c:if test="${not endflag}">
                <li>
                  <a
                    href="/ssmdemo/list?page=${data.currPage+1}&name=${name}"
                    aria-label="Next"
                  >
                    <span aria-hidden="true">&raquo;</span>
                  </a>
                </li>
              </c:if>
            </ul>
          </nav>
        </div>
        <div class="span4"></div>
      </div>
    </div>

    <!-- 添加/修改-->
    <div class="modal fade" tabindex="-1" role="dialog" id="addModel">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <button
              type="button"
              class="close"
              data-dismiss="modal"
              aria-label="Close"
            >
              <span aria-hidden="true">&times;</span>
            </button>
            <h4 class="modal-title" id="modelTitle">添加用户</h4>
          </div>
          <div class="modal-body">
            <form
              class="form-horizontal"
              action="/ssmdemo/add"
              method="post"
              id="formModel"
            >
              <div class="form-group">
                <label for="username1" class="col-sm-2 control-label"
                  >用户名</label
                >
                <div class="col-sm-10">
                  <input
                    type="text"
                    class="form-control"
                    id="username1"
                    placeholder="请输入用户名"
                    name="username"
                  />
                </div>
              </div>
              <div class="form-group">
                <label
                  for="password1"
                  class="col-sm-2 control-label"
                  >密码</label
                >
                <div class="col-sm-10">
                  <input type="password" class="form-control" id="password1" name="password"/>
                </div>
              </div>
              <div class="form-group">
                <label class="col-sm-2 control-label" >性别</label>
                <div class="col-sm-10">
                  <select name="sex" id="sex1">
                    <option value="M">男</option>
                    <option value="F">女</option>
                  </select>
                </div>
              </div>
              <div class="form-group">
                <label
                  for="birth1"
                  class="col-sm-2 control-label"
                  >出生日期</label>
                <div class="col-sm-10">
                  <input type="date" name="birth" id="birth1" />
                </div>
              </div>
              <div class="form-group">
                <div class="col-sm-offset-2 col-sm-10">
                  <button type="submit" class="btn btn-default" id="modelBtn">添加</button>
                </div>
              </div>
            </form>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">
              关闭
            </button>
          </div>
        </div>
        <!-- /.modal-content -->
      </div>
      <!-- /.modal-dialog -->
    </div>
    <!-- /.modal -->
  </body>
  <script>
    function edit(id) {
      $.ajax({
        dataType: "json", //预期服务器返回的数据类型
        url: "/ssmdemo/get?id="+id,
        contentType: "application/json; charset=utf-8",
        success: function (user) {
          $formModel = $("#formModel");
          $formModel.attr("action", "/ssmdemo/update?id="+user.id);
          $("#username1").val(user.username);
          $("#password1").val(user.password);
          $("#sex1").val(user.sex);
          $("#birth1").val(user.birth);
          $("#addModel").modal("show");
          $("#modelTitle").text("编辑用户");
          $("#modelBtn").text("修改");
        },
        error: function () {
          console.log("接口异常，现在联系管理员处理");
          return;
        },
      });
    }
     
    function del(id, username) {
      if (window.confirm("是否要删除 " + username +" 该用户")) {
        window.location.href = "/ssmdemo/del?id=" + id;
      }
    }

    function add() {
      $("#addModel").modal("show");
    }
  </script>
</html>
